<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet"/>
    <link rel="stylesheet" href="css/Site.css"/>
    <link rel="stylesheet" href="css/zy.all.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/amazeui.min.css"/>
    <link rel="stylesheet" href="css/admin.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>

<body>
<div class="dvcontent">

    <!--    模态框-->
    <!-- 修改模态框（Modal） -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" >修改</h4>
                </div>
                <div class="modal-body">
                    <form class="am-form am-form-horizontal">

                        <div class="am-form-group">
                            <input type="hidden" id="update-id">
                            <label for="update-name" class="am-u-sm-3 am-form-label">
                                用户名</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="update-name">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="update-pwd" class="am-u-sm-3 am-form-label">
                                密码</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="update-pwd">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="update-nickname" class="am-u-sm-3 am-form-label">
                                昵称</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="update-nickname" required
                                       placeholder="" name="nickname">
                            </div>
                        </div>
                        <div class="am-form-group">
                            头像
                            <div class="am-u-sm-9">
                                <input type="file" value="" class="uploadImage" className="form-control" placeholder="">
                                <img src="" alt="" style="height:100px;" class="showImage">
                                <button type="button" class="addImage">确认图片</button>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="update-group" class="am-u-sm-3 am-form-label">
                                用户组</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="update-group" required
                                       placeholder="" name="group">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="update-email" class="am-u-sm-3 am-form-label">
                                邮箱</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="update-email" required
                                       placeholder="" name="email">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="update-tel" class="am-u-sm-3 am-form-label">
                                电话</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="update-tel" required
                                       placeholder="" name="tel">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="update-status" class="am-u-sm-3 am-form-label">
                                状态</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="update-status" required
                                       placeholder="" name="status">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                                <input type="submit" class="am-btn am-btn-success"
                                      id="updateBtn" value="修改"/>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--模态框结束-->

    <!--    添加模态框（Modal）开始-->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" >添加</h4>
                </div>
                <div class="modal-body">
                    <form class="am-form am-form-horizontal">
                        <div class="am-form-group">
                            <label for="add-name" class="am-u-sm-3 am-form-label">
                                用户名</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="add-name">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="add-pwd" class="am-u-sm-3 am-form-label">
                                密码</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="add-pwd">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="add-nickname" class="am-u-sm-3 am-form-label">
                                昵称</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="add-nickname" required
                                       placeholder="" name="nickname">
                            </div>
                        </div>
                        <div class="am-form-group">
                            头像
                            <input type="file" value="" class="uploadImage" className="form-control" placeholder="">
                            <img src="" alt="" style="height:100px;" class="showImage">
                            <button type="button" class="addImage">确认图片</button>
                        </div>
                        <div class="am-form-group">
                            <label for="add-group" class="am-u-sm-3 am-form-label">
                                用户组</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="add-group" required
                                       placeholder="请填写数字..." name="group">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="add-email" class="am-u-sm-3 am-form-label">
                                邮箱</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="add-email" required
                                       placeholder="" name="email">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="add-tel" class="am-u-sm-3 am-form-label">
                                电话</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="add-tel" required
                                       placeholder="" name="tel">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="add-status" class="am-u-sm-3 am-form-label">
                                状态</label>
                            <div class="am-u-sm-9">
                                <input type="text" id="add-status" required
                                       placeholder="" name="status">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                                <input type="submit" class="am-btn am-btn-success"
                                       id="addBtn" value="增加"/>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>


    <!--    模态框结束-->

    <div>
        <!--tab start-->
        <div class="tabs">
            <div class="hd">
                <ul>
                    <li class="on" style="box-sizing: initial;-webkit-box-sizing: initial;">列表</li>
                    <li  style="box-sizing: initial;-webkit-box-sizing: initial;">
                        <button type="button"data-toggle="modal" data-target="#addModal" id="add" style="box-sizing: initial;-webkit-box-sizing: initial;border:0;outline:none;background-color: transparent" >添加</button>
                    </li>
                </ul>
            </div>
            <div class="bd">
                <ul style="display: block;padding: 20px;">
                    <li>
                        <!--分页显示角色信息 start-->
                        <div id="dv1">
                            <table class="table" id="tbRecord">
                                <thead>
                                <tr>

                                    <th>用户名</th>

                                    <th>昵称</th>
                                    <th>头像</th>
                                    <th>分组</th>
                                    <th>邮箱</th>
                                    <th>电话</th>
                                    <th>状态</th>
                                    <th>编辑</th>
                                    <th>删除</th>
                                </tr>
                                </thead>
                                <tbody id="usersTb">

                                </tbody>

                            </table>
                           <div class="content-row" style="display: flex;justify-content: space-between;">
                            <p>每页
                                <select id="pageSize">
                                    <option value="">所有</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                                条数据。共<span id="fillPageSize"></span>条数据。
                            </p>

                        </div>
                        <div class="content-row" style="text-align: center;">
                            <button id="firstPage">首页</button>
                            <button id="prePage">上一页</button>
                            <button id="nextPage">下一页</button>
                            <button id="lastPage">尾页</button>
                        </div>
                        </div>
                        <!--分页显示角色信息 end-->
                    </li>
                </ul>
                <ul class="theme-popbod dform" style="display: none;">
                    <div class="am-cf admin-main" style="padding-top: 0px;">
                        <!-- content start -->

                        <div class="am-cf admin-main" style="padding-top: 0px;">
                            <!-- content start -->
                            <div class="admin-content">
                                <div class="admin-content-body">

                                    <div class="am-g">
                                        <div class="am-u-sm-12 am-u-md-4 am-u-md-push-8">

                                        </div>
                                        <div class="am-u-sm-12 am-u-md-8 am-u-md-pull-4"
                                             style="padding-top: 30px;">

                                        </div>
                                    </div>
                                </div>

                            </div>
                            <!-- content end -->
                        </div>
                        <!--添加 end-->
                        <!--end-->
                    </div>
                </ul>

            </div>
        </div>
        <!--tab end-->

    </div>


    <script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.js"></script>
    <script src="./js/users.js"></script>


</div>
</body>

</html>